import React, { Component } from "react";
// import "./Hdlb.css";
import { Form, Input, Table, Button, Modal, message ,Select ,Breadcrumb} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import axios from "axios";

class Hdlb extends Component {
  constructor() {
    super();
    this.state = {
      hdData: [

      ],
      columns: [
        {
          title: "会员",
          dataIndex: "hdId",
          key: "hdId",
          align: "center",
        },
        {
          title: "登陆次数",
          dataIndex: "hdName",
          key: "hdName",
          align: "center",
        },
        {
          title: "最新登陆",
          dataIndex: "start",
          key: "start",
          align: "center",
        },
        {
          title: "会员归属",
          dataIndex: "end",
          key: "end",
          align: "center",
        },
        {
          title: "会员状态",
          dataIndex: "createUser",
          key: "createUser",
          align: "center",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (text, record) => (
            <div>
              <MyButton
                data={record}
                myEdit={this.myEdit}
                myDel={this.myDel}
              ></MyButton>
            </div>
          ),
        },
      ],
    };
  }
  componentDidMount(){
    axios({
      url:'http://123.57.67.148:3000/mock/51/hdlb',
      method:'get'
    }).then(res=>{
    this.setState({
     hdData: res.data.data.map((item,index)=>{
       return Object.assign(item,{key:index})
     })
    })
    })
  }

  
  // 编辑
  myEdit = (obj) => {
    let a = [...this.state.hdData];
    for (let i = 0; i < a.length; i++) {
      if (obj.key === a[i].key) {
        a[i] = obj;
      }
    }
    // console.log(a);
    this.setState({
      hdData: a,
    });
  };
  // 删除
  myDel = (obj) => {
    // console.log(obj.key);
      console.log(obj)
    let a = [...this.state.hdData];
    for (let i = 0; i < a.length; i++) {
      if (obj.key === a[i].key) {
        a.splice(i, 1);
      }
    }
    //   console.log(a)
    this.setState({
      hdData: a,
    });
  };
  //搜索
  inputChange = (e) =>{
    this.setState({
      inputtext:e.target.value
    })
  }
  searchBtn = () =>{
    let text = this.state.inputtext
    if(text){
      
      console.log(text)
    }else{
      message.info('请输入')
    }
  }
  
  render() {
    //   const {data} = this.props.hp
    return (
      <div>
                <Breadcrumb>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                    <Breadcrumb.Item>客服</Breadcrumb.Item>
                    <Breadcrumb.Item>注册会员</Breadcrumb.Item>
                </Breadcrumb>
                <div className="zchy"></div>
                <div className="zchy1">注册会员</div>  
                <div className="zchy"></div>     

          <Table
            pagination={{ pageSize: 8 }}
            columns={this.state.columns}
            dataSource={this.state.hdData}
            bordered
            title = {()=><div>
              <div style={{ display: 'flex', width: '20%' ,marginLeft:'1200PX'}}>
                <Input placeholder='请输入会员电话号码' onChange={this.inputChange} value={this.state.inputtext}/>
                <Button onClick={this.searchBtn} >搜索</Button>
                <Button>重置</Button>
              </div>
            </div>}
          />
      </div>
      

    );
  }
}

class MyButton extends Component {
  state = {
    select :{
      selectValue:"允许登陆"
    },
    visible: false, //Modal状态
    obj: {},
  };
  // 编辑获得初始值
  handleEditer = (obj) => {
    // console.log(obj);
    this.setState({
      visible: true,
      obj: obj,
    });
  };
  // 表单提交
  handleOk = () => {
    // console.log(this.state.obj);
    message.success("编辑成功");
    this.props.myEdit(this.state.obj);
    this.setState({
      visible: false,
    });
  };
  // 关闭对话框
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  };
  onChange = (name, value) => {
    // let a = { ...this.state.obj };
    // a[name] = value;
    let a = Object.assign({}, this.state.obj, { [name]: value });
    // console.log(name, value);
    this.setState({
      obj: a,
    });
  };
  handleChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  };
  newAddSelectChange = (name) =>{
    return (e) => this.onChange(name, e);
  }
  // 删除
  confirm = (obj) => {
    Modal.confirm({
      title: "删除",
      icon: <ExclamationCircleOutlined />,
      content: "删除后不可恢复，是否确认删除！",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        message.success("删除成功");
        this.props.myDel(obj);
      },
    });
  };
  render() {
    return (
      <div className="anniu">
        <Button
          onClick={this.handleEditer.bind(this, this.props.data)}
          type="primary"
        >
          查看
        </Button>
        <Button
          onClick={this.confirm.bind(this, this.props.data)}
          type="danger"
        >
          删除
        </Button>

        
        <Modal
          title="编辑"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this, this.props)}
          onCancel={this.handleCancel}
          okText="确认"
          cancelText="取消"
        >
          <Form
            name="nest-messages"
            // onFinish={onFinish}
          >
            <Form.Item label="会员">
              <Input
                value={this.state.obj.hdId}
                onChange={this.handleChange("hdId")}
              />
            </Form.Item>
            <Form.Item label="登陆次数">
              <Input
                value={this.state.obj.hdName}
                disabled
              />
            </Form.Item>
            <Form.Item label="最新登陆">
              <Input
                disabled
                value={this.state.obj.start}
                onChange={this.handleChange("start")}
              />
            </Form.Item>
            <Form.Item label="会员归属">
              <Input
                value={this.state.obj.end}
                onChange={this.handleChange("end")}
              />
            </Form.Item>
            <Form.Item label="会员电话">
              <Input
                value={this.state.obj.phone}
                onChange={this.handleChange("phone")}
              />
            </Form.Item>            
            <Form.Item label="会员状态">
              <Select
               value={this.state.obj.createUser}
               onChange={this.newAddSelectChange("createUser")}
              >
                <Select.Option value="允许登陆">允许登陆</Select.Option>
                <Select.Option value="禁止登陆">禁止登陆</Select.Option>
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}
// class MyHead extends Component {
//   render
// }
export default Hdlb;
